<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'PointPrimitive',
        data() {
            return {}
        },
        mounted() {
            let viewer = this.initCesium();
            this.addPointPrimitive(viewer)
        },
        methods: {
            initCesium: function () {
                let viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                    // terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({
                    //     url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
                    // })
                });
                viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
                viewer.scene.globe.depthTestAgainstTerrain = true;
                return viewer;
            },
            addPointPrimitive(viewer) {
                const points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection({
                    debugShowBoundingVolume:false
                }));
                points.add({
                    pixelSize: 50.0,
                    position: Cesium.Cartesian3.fromDegrees(113.3283519744873, 23.13791328523066, 100.0),
                    color: Cesium.Color.RED
                });
                points.add({
                    pixelSize: 50.0,
                    position: Cesium.Cartesian3.fromDegrees(113.33453178405762, 23.137045089685056, 100.0),
                    color: Cesium.Color.GREEN
                });
                points.add({
                    pixelSize: 50.0,
                    position: Cesium.Cartesian3.fromDegrees(113.33075523376465, 23.134992968776594, 100.0),
                    color: Cesium.Color.BLUE
                });
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(113.33101272583008, 23.13720294383875, 1000.0),
                    orientation: {
                        heading: Cesium.Math.toRadians(175.0),
                        pitch: Cesium.Math.toRadians(-90.0),
                        roll: 0.0
                    }
                });
            },
        }
    }
</script>

